import Vue from 'vue';

/**
 * 节点渲染器
 * 负责将 Vue 组件挂载到 X6 节点的 DOM 上
 */
export class NodeRenderer {
  constructor() {
    this.vms = new Map(); // 存储每个节点的 Vue 实例
  }

  /**
   * 渲染节点
   * @param {Object} node - X6 节点实例
   * @param {Object} component - Vue 组件
   */
  render(node, component) {
    console.log('[NodeRenderer] Rendering node:', node.id, node.shape);
    // 查找节点的 foreignObject 容器
    const container = this.getNodeContainer(node);
    if (!container) {
      console.warn('[NodeRenderer] Node container not found:', node.id);
      return;
    }
    console.log('[NodeRenderer] Container found:', container);

    // 如果已经渲染过，先卸载
    if (this.vms.has(node.id)) {
      this.unmount(node.id);
    }

    // 创建 Vue 2 实例
    const ComponentClass = Vue.extend(component);
    const vm = new ComponentClass({
      propsData: {
        node,
      },
    });

    // 挂载到容器
    vm.$mount();
    container.appendChild(vm.$el);

    // 保存实例
    this.vms.set(node.id, vm);
  }

  /**
   * 获取节点的 DOM 容器
   */
  getNodeContainer(node) {
    try {
      // 获取节点的 DOM 元素
      const cellView = node.view;
      if (!cellView) {
        console.warn('[NodeRenderer] No view found for node');
        return null;
      }

      // 获取节点的 SVG 元素
      const svgElement = cellView.container;
      if (!svgElement) {
        console.warn('[NodeRenderer] No container found');
        return null;
      }

      // 查找 foreignObject 元素
      const foreignObject = svgElement.querySelector('foreignObject');
      if (!foreignObject) {
        console.warn('[NodeRenderer] No foreignObject found in node');
        return null;
      }

      // 查找 foreignObject 内的 body
      let body = foreignObject.querySelector('body');
      if (!body) {
        console.warn('[NodeRenderer] No body in foreignObject, creating one');
        body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
        body.style.width = '100%';
        body.style.height = '100%';
        body.style.margin = '0';
        body.style.padding = '0';
        body.style.overflow = 'hidden';
        foreignObject.appendChild(body);
      }

      // 查找或创建容器
      let container = body.querySelector('.liteflow-node-container');
      if (!container) {
        container = document.createElement('div');
        container.className = 'liteflow-node-container';
        body.appendChild(container);
      }

      console.log('[NodeRenderer] Container ready:', container);
      return container;
    } catch (error) {
      console.error('[NodeRenderer] Error getting node container:', error);
      return null;
    }
  }

  /**
   * 卸载节点的 Vue 实例
   */
  unmount(nodeId) {
    const vm = this.vms.get(nodeId);
    if (vm) {
      vm.$destroy();
      if (vm.$el && vm.$el.parentNode) {
        vm.$el.parentNode.removeChild(vm.$el);
      }
      this.vms.delete(nodeId);
    }
  }

  /**
   * 销毁渲染器，卸载所有 Vue 实例
   */
  destroy() {
    this.vms.forEach((vm) => {
      vm.$destroy();
      if (vm.$el && vm.$el.parentNode) {
        vm.$el.parentNode.removeChild(vm.$el);
      }
    });
    this.vms.clear();
  }
}

export default NodeRenderer;
